<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>瀑布流</title>
	<script src="./jquery-1.8.3.min.js"></script>
	<style>
		*{margin:0;padding: 0;list-style: none;}
		ul{
			width: 25%;
			/*height: 2000px;*/
			border: 1px solid red;
			float: left;
			box-sizing :border-box;
		}
		ul li{
			width: 90%;
			height: 350px;
			border: 1px solid green;
			margin:0 auto;
			text-align: center; 

		}

	</style>

</head>
<body>
		<li style="display:none">
			<img src="./images/05bb0203db64c3cfea040ffb05e2e73c.jpg" alt="" height="293">
			<h3>商品信息</h3>
			<p>商品价格</p>
		</li>
		<ul>
			
		</ul>
		<ul></ul>
		<ul></ul>
		<ul></ul>

	<script>
	//页数
	var p=1

	//页面加载完先执行一次ajax操作
	RequestDate();

	//添加滚动事件
	$(window).scroll(function(){
		//判断是否触底
		//获取文档的高度
		var Dh=$(document).height();
		//当前文档的偏移位置
		var Fh=$(document).scrollTop();
		//窗口的高度
		var Wh=$(window).height();
		if(Dh==Fh+Wh){
			//触底 在此请求数据
			RequestDate();
		}
	})

	// 封装克隆函数
	function RequestDate(){
		//页面进来发送ajax请求
		$.get("./cgi-bin/goods.py",{P:p},function(data){
			console.log(data);
			//遍历拿到的数据
			for (i in data){
				//克隆li元素
				var el=$("li:first").clone();
				
				el.find("img").attr("src",data[i].pic);
				el.find("h3").html(data[i].id+data[i].title);
				el.find("p").html("价格："+data[i].price);


				//设置克隆元素的显示
				el.css("display","block");

				//添加元素
				//添加元素 对4取余
				var ind=i%4;
				$("ul").eq(ind).append(el);

			}
		},"json");
		p++;

	}

	</script>
</body>
</html>